<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="" width="90%" center @open="openDialog" @close="closeDialog">
    <template #header="{ titleId }">
      <div :id="titleId" style="font-size: 22px; font-weight: bold; text-align: center">盘点报告</div>
    </template>
    <px-scrollbar class="view-equip-detail">
      <div style="display: flex; justify-content: space-between">
        <div class="view-equip-title">盘点基本详情</div>
        <px-button type="primary" plain @click="downloadReport">报告下载</px-button>
      </div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">盘点名称</div>
            <div class="text">{{ formValue.takeStockName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">盘点编码</div>
            <div class="text">{{ formValue.takeStockCode }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ formValue.classNameDesc }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">仓库</div>
            <div class="text">{{ formValue.warehousePositionDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">盘点负责人</div>
            <div class="text">{{ formValue.takeStockPeopleName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">计划日期</div>
            <div class="text">{{ formValue.planStartDate }} - {{ formValue.planEndDate }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">执行状态</div>
            <div class="text">{{ formValue.executeStatusDesc }}</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">备注</div>
            <div class="text">{{ formValue.remark }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">备件盘点表</div>
      <div class="view-equip-wrap view-equip-wrap-second">
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">盘点范围</div>
            <div class="text">{{ formValue.takeStockScope === "all" ? "全面盘点" : "指定盘点" }}</div>
          </div>
        </div>
      </div>
      <px-table :data="formValue.inventoryDetailDTOList" class="equip-table" size="small" height="320" border>
        <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
        <px-table-column label="差额" min-width="120" show-overflow-tooltip class="table-column-differ">
          <template #default="scope">
            <div
              v-if="scope.row.takeStockQuantity - scope.row.currentStock > 0"
              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 6px 8px; color: #10b981; background: #e8f8f3"
            >
              {{ scope.row.takeStockQuantity - scope.row.currentStock }}
            </div>
            <div
              v-else-if="scope.row.takeStockQuantity - scope.row.currentStock < 0"
              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 6px 8px; color: #f00; background: #ffe5e5"
            >
              {{ scope.row.takeStockQuantity - scope.row.currentStock }}
            </div>
            <div v-else style="color: #000">
              {{ scope.row.takeStockQuantity - scope.row.currentStock }}
            </div>
          </template>
        </px-table-column>
        <px-table-column prop="sparePartUnitDesc" label="单位" min-width="120" show-overflow-tooltip />
      </px-table>
    </px-scrollbar>
  </px-dialog>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed, getCurrentInstance } from "vue";
import { getSparePartsTakeStock } from "@/api/equip/spareParts";
const { proxy }: any = getCurrentInstance();
// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "sparePartsId"]);
const visible = computed(() => props.visible);
const state = reactive<any>({
  formValue: {
    id: "",
    takeStockName: "",
    takeStockCode: "",
    classNameDesc: "",
    warehousePositionDesc: "",
    takeStockPeopleName: "",
    planStartDate: "",
    planEndDate: "",
    executeStatusDesc: "",
    remark: "",
    takeStockScope: "all",
    inventoryDetailDTOList: []
  },
  tableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "120", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartName", label: "名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "brandName", label: "品牌", minWidth: "120", showOverflowTooltip: true },
    { prop: "supplyModel", label: "厂商型号", minWidth: "120", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "120", showOverflowTooltip: true },
    { prop: "currentStock", label: "库存量", minWidth: "120", showOverflowTooltip: true },
    { prop: "alarmStock", label: "安全库存量", minWidth: "120", showOverflowTooltip: true },
    { prop: "warehousePositionDesc", label: "库位", minWidth: "120", showOverflowTooltip: true },
    { prop: "takeStockQuantity", label: "盘点数量", minWidth: "120", showOverflowTooltip: true }
  ]
});
const { formValue, tableColumns } = toRefs(state);
// 盘点报告下载
const downloadReport = () => {
  const params = {
    id: props.sparePartsId
  };
  proxy.download("post", "/digitaltwins/api/v1/takeStock/exportTakeStockReport", params, "盘点报告下载.xlsx");
};
// 打开弹窗
const openDialog = async () => {
  const params = {
    id: props.sparePartsId
  };
  const data = await getSparePartsTakeStock(params);
  formValue.value.id = data.id;
  formValue.value.takeStockName = data.takeStockName;
  formValue.value.takeStockCode = data.takeStockCode;
  formValue.value.classNameDesc = data.classNameDesc;
  formValue.value.warehousePositionDesc = data.warehousePositionDesc;
  formValue.value.takeStockPeopleName = data.takeStockPeopleName;
  formValue.value.planStartDate = data.planStartDate;
  formValue.value.planEndDate = data.planEndDate;
  formValue.value.executeStatusDesc = data.executeStatusDesc;
  formValue.value.remark = data.remark;
  formValue.value.takeStockScope = data.takeStockScope;
  formValue.value.inventoryDetailDTOList = data.inventoryDetailDTOList;
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
  formValue.value = {
    id: "",
    takeStockName: "",
    takeStockCode: "",
    classNameDesc: "",
    warehousePositionDesc: "",
    takeStockPeopleName: "",
    planStartDate: "",
    planEndDate: "",
    executeStatusDesc: "",
    remark: "",
    takeStockScope: "all",
    inventoryDetailDTOList: []
  };
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.equip-dialog-wrap {
  .view-equip-detail {
    height: calc(100vh - 320px);
  }
}
</style>
